<template>
  <div class="killMerchantTeam">
    <div class="name">布局</div>
    <div class="setting">
      <el-radio-group v-model="config.num" @change="onChange">
        <el-radio 
          v-for="(item, index) in groupList" 
          :key="index"  
          :label="item.key">
          {{ item.label }}
        </el-radio>
      </el-radio-group>
    </div>
    <Slider
      v-model="detail.borderRadius"
      name="圆角"
      :max="20"
      @change="onChange"
    />
    <AlphaColor v-model="config.bgColor" name="商品组背景色" @change="onChange" />
    <AlphaColor
      v-model="config.prizeBgColor"
      name="商品背景色"
      @change="onChange"
    />
    <OImage
      v-model="config.prizeBg"
      v-model:show="config.showPrizeBg"
      name="商品背景图片"
      @change="onChange"
    />
    <Color v-model="config.color" name="文字颜色" @change="onChange" />
    <Color v-model="config.color" name="进度条颜色" @change="onChange" />
    <OImage
      v-model="detail.btnImg"
      v-model:size="detail.btnSize"
      name="立即抢购按钮"
      @change="onChange"
    />
    <OImage
      v-model="detail.btnImg"
      v-model:size="detail.btnSize"
      name="未开始按钮"
      @change="onChange"
    />
    <OImage
      v-model="detail.btnImg"
      v-model:size="detail.btnSize"
      name="已抢光按钮"
      @change="onChange"
    />
  </div>
</template>

<script setup>
import OImage from "../setting/Images.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Color from "../setting/Color.vue";
import Slider from "../setting/Slider.vue";
import { METHODS } from "http";

// props
const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
});

// DATA
const form = ref({
  $position: { left: 20, top: 20 },
  $size: { width: 335, height: 300 },
  type: 3,
  showBgImg: false,
  bgColor: "#ffffff",
  borderRadius: 10,
  showPrizeBg: false,
  color: "#000000",
  textSize: { width: 305, height: 270 },
  textPosition: { left: 15, top: 15 },
});
const groupList = [
  { label: "一组", key: "default" },
  { label: "两组", key: 2 },
  { label: "三组", key: 3 },
  { label: "四组", key: 4 },
  { label: "五组", key: 5 },
  { label: "六组", key: 6 },
  { label: "七组", key: 7 },
  { label: "八组", key: 8 },
  { label: "九组", key: 9 },
];

// ONMOUNTED
onMounted(() => {
  nextTick(() => {
    onChange();
  });
});

// METHODS
const emits = defineEmits(["update:config", "change"]);
const onChange = (val) => {
  detail.value = detail.value;
};

// COMPUTED
const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});
</script>

<style lang="scss" scoped>
.killMerchantTeam {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  .name {
    font-size: 14px;
  }
  .setting {
    margin-left: 20px;
  }
}
</style>